<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>融弈签</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			/**该css为解决滑动时候警告：Unable to preventDefault inside passive event listener**/
			* { touch-action: pan-y; } 
			body {
				background-color: #F3F3F2;
			}
			.mui-content {
				background-color: #F3F3F2;
			}
			.mui-bar-tab .mui-tab-item {
				background-color: #FFFFFF;
				font-size: 12px;
			    color: #4C4C4C;
			    letter-spacing: 0.55px;
			    text-align: -webkit-center;
			}
			.mui-bar-tab .mui-tab-item.mui-active{
				background-color: #FFFFFF;
			    font-size: 12px;
			    color: #5BA9F9;
			    letter-spacing: 0.46px;
			    text-align: -webkit-center;
			}
			.tab-bottom-visa{
				background-image:url(../img/index/visa_icon_norm.png); 
				background-size: 100% 100%;	
			}
			.mui-active .tab-bottom-visa{		
				background-image:url(../img/index/visa_icon_pressed.png); 
				background-size: 100% 100%;	
			}
			.tab-bottom-order{		
				background-image:url(../img/index/order_icon_norm.png); 
				background-size: 100% 100%;	
			}
			.mui-active .tab-bottom-order{	
				background-image:url(../img/index/order_icon_pressed.png); 
				background-size: 100% 100%;	
			}
			.tab-bottom-mine{
				background-image:url(../img/index/mine_icon_norm.png); 
				background-size: 100% 100%;	
			}
			.mui-active .tab-bottom-mine{
				background-image:url(../img/index/mine_icon_pressed.png); 
				background-size: 100% 100%;	
			}
			.mui-bar-tab .mui-tab-item .mui-icon {
				top: 8px;
			    width: 25px;
			    height: 25px;
			    padding-top: 0;
			    padding-bottom: 0;
			}
			.banner-div {
				width: 100%;
				height: 226px;
				/*background-image: url(../img/index/home_bg.png);
				background-size: 100% 100%;*/
			}
			/**个人中心**/
			.header-bg-div {
				width: 100%;
				height: 200px;
				background: url(../img/index/person_header_bg.png);
				background-size: 100% 100%;
				position: relative;
				text-align: center;
			}
			.head-upload-div {
				padding-top: 22px;
				text-align: center;
				text-align: -webkit-center;
			}
			.image-icon {
				width: 82px;
				height: 82px;
				border-radius: 50%;
				align-self: center;
			}
			.header-upload-tip {
				font-size: 14px;
				color: #FFFFFF;
				margin-top: 10px;
			}
			.item-div {
				background-color: #FFFFFF;
				padding: 0px 14px;
				height: 49px;
				position: relative;
			}
			.item-span {
				font-size: 13px;
				color: #444444;
				line-height: 49px;
				font-family: "PingFang-SC-Regular";
			}
			.arrow-icon {
				height: 16px;
				position: absolute;
				right: 14px;
				top: 17px;
			}
			.left-icon {
				width: 15px;
				height: 15px;
				vertical-align: middle;
			}
			.line-div {
				width: 100%;
				height: 1px;
				background-color: #F3F3F3;
			}
			.menu-div {
				margin-top: 10px;
				margin-bottom: 80px;
				width: 100%;
			}
			/**签证**/
			.search-div {
				width: 80%;
				height: 35px;
				margin-left: 10%;
				border-radius: 20px;
				position: fixed;
				left: 0px;
				top: 10px;
				z-index: 1000;
				opacity: 0.4;
				background-color: #000000;
			}
			.search-icon {
				width: 16px;
				height: 16px;
				margin-left: 10px;
				vertical-align: middle
			}
			.search-span {
				margin-left: 15px;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 35px;
				vertical-align: middle;
			}
			.visa-container {
				text-align: center;
				padding: 20px 0px;
				background-color: #FFFFFF;
			}
			.left-visa-div {
				display: inline-block;
			}
			.right-visa-div {
				margin-left: 50px;
				display: inline-block;
			}
			.visa-icon {
				width: 26px;
				height: 26px;
				vertical-align: middle
			}
			.visa-span {
				font-size: 16px;
			}
			.bottom-tips-div {
				height: 200px;
				line-height: 200px;
				text-align: center;
				font-family: 'PingFangSC-Regular';
				font-size: 15px;
				color: #666666;
			}
			.question-container {
			    margin-top: 10px;
			}
			.goods-container {
				margin-top: 1px;
			}
			.visa-question {
				padding: 10px;
				position: relative;
			}
			.visa-question .icon {
				width: 14px;
				height: 14px;
				vertical-align: middle;
			}
			.visa-question .more-icon {
				width: 6px;
				height: 10px;
				vertical-align: middle;
			}
			.visa-question .title {
				font-size: 14px;
				color: #1E79C5;
			}
			.visa-question .content {
				font-size: 12px;
				color: #4D454B;
			}
			.visa-question .label-content {
				font-size: 12px;
				color: #6C676B;
			}
			.visa-question .more {
				position: absolute;
				right: 10px;
				top: 10px;
			}
			.hot-country-container {
				width: 100%;
				padding-top: 20px;
				background-color: #FFFFFF;
			}
			.hot-goods-div {
				text-align: center;
				font-family: 'PingFangSC-Regular';
				font-size: 18px;
				color: #333333;
			}
			.hot-goods-tips-div {
				display: none;
				text-align: center;
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #999999;
				line-height: 50px;
				margin-top: 16px;
    				border-top: 1px solid #F3F3F3;
			}
			.ul-goods {
				width: 100%;
			}
			.li-goods {
				width: 100%;
				margin-top: 15px;
			    padding-bottom: 10px;
				border-bottom: 1px solid #F3F3F3;
			}
			.item-goods {
				margin: 5px 5px 0px 5px;
				text-align: center;
			}
			.goods-img {
				width: 100%;
			}
			.goods-name {
				font-size: 14px;
				color: #919090;
				margin-top: 5px;
			}
			.goods-price {
				font-size: 13px;
				color: #919090;
				margin-top: 5px;
			}
			.continents-ul {
				width: 100%;
			}
			.country-container {
				margin-top: 10px;
				padding-top: 20px;
				background-color: #FFFFFF;
			}
			.chau-title-container {
				width: 100%;
				margin-bottom: 20px;
			}
			.chau-title-div {
				width: 100%;
				text-align: center;
			}
			.chau-title-div span {
				font-family: 'PingFangSC-Regular';
				font-size: 18px;
				color: #333333;
			}
			.chau-title-div .icon {
				width: 14px;
				height: 14px;
			}
			.chau-tips {
				margin-top: 5px;
				text-align: center;
				font-family: 'PingFangSC-Regular';
				font-size: 12px;
				color: #999999;
			}
			.country-ul {
				margin-top: 15px;
			}
			.country-li {
				width: 100%;
				height: 120px;
				background-image: url(../img/index/shuijiao.jpg);
				background-size: 100% 100%;
				text-align: center;
			}
			.country-name-li {
				text-align: center;
				padding-top: 40px;
				font-size: 16px;
				color: #FFFFFF;
			}
			.visa-type-div {
				width: 100%;
				margin-top: 15px;
				text-align: center;
			}
			.visa-type-div span {
				font-size: 14px;
				color: #FFFFFF;
				margin-left: 10px;
			}
			/**订单**/
			#tabbar-with-chat {
				background-color: #FAFAFA;
			}
			.order {
				margin-top: 44px;
				height: 100%;
			}
			.order-list {
				position: relative;
				margin-bottom: 16px;
				background-color: #fff;
				font-size: 14px;
			}
			.order-status {
				padding: 10px 20px;
			}
			.order-status .order-no {
				color: #474546;
			}
			.order-status .status {
				color: #FF4747;
			}
			.order-info {
				background-color: #FFFFFF;
			}
			.order-title {
				padding: 10px 15px;
				border-bottom: 1px solid #D9D8D9;
			}
			.order-title .order-img {
				vertical-align: middle;
				width: 28px;
				height: 18px;
				margin-right: 15px;
			}
			.order-title .order-name {
				vertical-align: middle;
				width: calc(100% - 48px);
				display: inline-block;
				color: #333333;
			}
			.order-user {
				margin-left: 63px;
				padding: 10px 0;
				border-bottom: 1px solid #D9D8D9;
			}
			.order-user:last-child {
				border: none;
			}
			.order-user .user-name {
				margin-right: 15px;
				color: #333333;
			}
			.order-user .user-post {
				color: #999999;
			}
			.order-btn {
				padding: 10px 15px;
				text-align: right;
			}
			.order-btn .mui-btn {
				margin-right: 10px;
			}
			.swiper-slide {
				height: 150px;
				background-image: url(../img/index/shuijiao.jpg);
				background-size: 100% 100%;
			}
			.margin-t-1 {
				margin-top: 1px;
			}
			.margin-t-10 {
				margin-top: 10px;
			}
			
			.floor-nav{
				width: 100%;
				height: 50px;
				text-align: center;
				left: 0;
				top: 0;
				z-index: 999;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F3F3F3;
				display: -webkit-box;
	            overflow-x: scroll;
	            -webkit-overflow-scrolling:touch;
			}
			.scroll-nav{
				font-family: 'PingFangSC-Regular';
				font-size: 15px;
				color: #999999;
				width: 16.6%;
				height: 50px;
				line-height: 50px;
				cursor: pointer;
			}
			.scroll-nav.active{ font-size: 20px;color: #333333; font-weight: bold; }
			.scroll-floor{width: 100%;color: #fff;text-align: center;}
			.pding-right-35 {
				padding-right: 35px;
			}
			.swiper-container {
				width: 100%;
			}
			.goods-id, .country-id-li, .cuntry-id {
				display: none;
			}
			.swiper-country-div {
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.3);
			}
			.header-div {
				width: 82px;
				height: 82px;
				border-radius: 50%;
				text-align: -webkit-center;
				background-image: url(../img/index/header_img.png);
				background-size: 100% 100%;
			}
			.header-div input::-webkit-file-upload-button {
	            width: 82px;
	            height: 82px;
	            border: none;
	            position: absolute;
	            outline: 0;
	            opacity: 0;
	        }
	        .header-div input#file {
	            display: block;
	            width: auto;
	            border: 0;
	            vertical-align: middle;
	        }
		</style>
	</head>

	<body>
		<nav id="slider" class="mui-bar mui-bar-tab">
			<a id="homeTab" class="mui-tab-item mui-active" data-id="0" href="#tabbar">
				<span class="mui-icon tab-bottom-visa"></span>
				<span class="mui-tab-label">签证</span>
			</a>
			<a id="orderTab" class="mui-tab-item" data-id="1" href="#tabbar-with-chat">
				<span class="mui-icon tab-bottom-order"></span>
				<span class="mui-tab-label">订单</span>
			</a>
			<a id="mineTab" class="mui-tab-item" data-id="2" href="#tabbar-with-contact">
				<span class="mui-icon tab-bottom-mine"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<div class="banner-div">
					<div class="swiper-container banner">
					    <div class="swiper-wrapper">
					      <!--<div class="swiper-slide" style="height: 300px; background-image:url(../img/index/home_bg.png)"></div>
					      <div class="swiper-slide" style="height: 300px; background-image:url(../img/index/shuijiao.jpg)"></div>-->
					    </div>
					    <!-- Add Pagination -->
					    <div class="swiper-pagination swiper-pagination-white"></div>
			  		</div>
				</div>
				<!--<div class="search-div">
					<img class="search-icon" src="../img/index/search_icon.png"/>
					<span class="search-span">搜索目的地</span>
				</div>-->
				<div class="visa-container">
					<div class="left-visa-div">
						<img class="visa-icon" src="../img/index/duoci_icon.png"/>
						<span class="visa-span">多年多次签</span>
					</div>
					<div class="right-visa-div">
						<img class="visa-icon" src="../img/index/luodi_icon.png"/>
						<span class="visa-span">免签/落地签</span>
					</div>
				</div>
				<div class="question-container">
					<nav class="floor-nav">
						<div class="scroll-nav active">热门</div>
						<!--<div class="scroll-nav">亚洲</div>
						<div class="scroll-nav">美洲</div>
						<div class="scroll-nav">大洋洲</div>
						<div class="scroll-nav">欧洲</div>
						<div class="scroll-nav">东南亚</div>
						<div class="scroll-nav pding-right-35">非洲</div>-->
					</nav>
					<div class="goods-container">
						<div class="scroll-floor hot-country-container">
							<div class="hot-goods-div">热门商品</div>
							<div id="hotGoods" class="ul-goods">
								<!--<div class="li-goods">
									<div class="item-goods">
										<img class="goods-img" src="../img/index/shuijiao.jpg" />
										<div class="goods-name">【全国受理】英国旅游签-两年多次</div>
										<div class="goods-price">¥666</div>
									</div>
								</div>
								<div class="li-goods">
									<div class="item-goods">
										<img class="goods-img" src="../img/index/shuijiao.jpg" />
										<div class="goods-name">【全国受理】英国旅游签-两年多次</div>
										<div class="goods-price">¥666</div>
									</div>
								</div>-->
							</div>
							<div class="hot-goods-tips-div">暂无热门商品！</div>
						</div>
						<!--<div class="continents-ul">
							<div class="scroll-floor country-container">
								<div class="chau-title-container">
									<div class="chau-title-div">
										<span>亚洲</span>
										<img class="icon" src="../img/index/go.png" />
									</div>
									<div class="chau-tips">已支持10个国家和地区</div>
								</div>
								<div class="swiper-container country">
								    <div class="swiper-wrapper">
								      <div class="swiper-slide">
								      	<div class="country-name-li">日本</div>
										<div class="visa-type-div">
											<span>过境签</span>
											<span>旅游证</span>
											<span>商务证</span>
										</div>
								      </div>
								      <div class="swiper-slide">
								      	<div class="country-name-li">日本</div>
										<div class="visa-type-div">
											<span>过境签</span>
											<span>旅游证</span>
											<span>商务证</span>
										</div>
								      </div>
								      <div class="swiper-slide">
								      	<div class="country-name-li">日本</div>
										<div class="visa-type-div">
											<span>过境签</span>
											<span>旅游证</span>
											<span>商务证</span>
										</div>
								      </div>
								      <div class="swiper-slide">
								      	<div class="country-name-li">日本</div>
										<div class="visa-type-div">
											<span>过境签</span>
											<span>旅游证</span>
											<span>商务证</span>
										</div>
								      </div>
								    </div>
								</div>
							</div>
						</div>-->
					</div>
				</div>
				<div class="bottom-tips-div">已经到底了</div>
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<h1 class="mui-title">我的订单</h1>
				</header>
				<div class="order" id="orderList">
					<!--<div class="order-list">
						<div class="order-status space-between">
							<span class="order-no">订单编号：213889</span><span class="status">待上传资料</span>
						</div>
						<div class="order-info">
							<div class="order-title">
								<img class="order-img" src="../img/index/shuijiao.jpg" />
								<div class="order-name mui-ellipsis">(成都领域)韩国旅游签证-全日制本科以上学了的开始放假了发了卡萨丁</div>
							</div>
							<div class="order-user">
								<span class="user-name">吴京</span><span class="user-post">在职人员</span>
							</div>
						</div>
						<div class="order-btn">
							<button type="button" style="color: #ccc;" class="mui-btn mui-btn-outlined">取消订单</button>
							<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">上传资料</button>
						</div>
					</div>-->
				</div>
			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<div class="header-bg-div">
					<div class="head-upload-div">
						<div class="header-div">
							<input type="file" id="file" accept="image/*" onchange="handleInputChange(this);" />
						</div>
						<div class="header-upload-tip">上传头像</div>
					</div>
				</div>
				<div class="menu-div">
					<div class="item-div" data-type="1">
						<img class="left-icon" src="../img/mine/vouchers_icon.png" />
						<span class="item-span">我的订单</span>
						<img class="arrow-icon" src="../img/detail/go_more.png" />
					</div>
					<div class="item-div margin-t-1" data-type="2">
						<img class="left-icon" src="../img/mine/person_icon.png" />
						<span class="item-span">申请人资料</span>
						<img class="arrow-icon" src="../img/detail/go_more.png" />
					</div>
					<div class="item-div margin-t-1" data-type="3">
						<img class="left-icon" src="../img/mine/addr_icon.png" />
						<span class="item-span">地址管理</span>
						<img class="arrow-icon" src="../img/detail/go_more.png" />
					</div>
					<div class="item-div margin-t-10" data-type="4">
						<img class="left-icon" src="../img/mine/opinion.png" />
						<span class="item-span">意见反馈</span>
						<img class="arrow-icon" src="../img/detail/go_more.png" />
					</div>
					<div class="item-div margin-t-1" data-type="5">
						<img class="left-icon" src="../img/mine/question.png" />
						<span class="item-span">客服咨询</span>
						<img class="arrow-icon" src="../img/detail/go_more.png" />
					</div>
					<!--<div class="item-div margin-t-1" data-type="6">
						<img class="left-icon" src="../img/mine/question.png" />
						<span class="item-span">隐私政策</span>
						<img class="arrow-icon" src="../img/detail/go_more.png" />
					</div>
					<div class="item-div margin-t-10" data-type="7">
						<img class="left-icon" src="../img/mine/zixun_icon.png" />
						<span class="item-span">关于我们</span>
						<img class="arrow-icon" src="../img/detail/go_more.png" />
					</div>-->
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery.scroll.floor.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var fromType = base.getParameter("fromType");
		var floorNavTop = 0;
		$(function() {
			// 2、从本地存储获取数据
        		var headImg = sessionStorage.getItem('headImg');
			if(headImg) {
				$(".header-div").css("background-image", "url("+headImg+")");
				$(".header-div").css("background-size", "100% 100%");	
			}
			if(fromType == 1) {
				var li = $('#slider .mui-tab-item').eq(1);
	           	li.addClass('mui-active').siblings().removeClass('mui-active');
	           	$('.mui-control-content').removeClass('mui-active');
				$('#tabbar-with-chat').addClass('mui-active');
			} else {
				//记忆返回首页时是选中样式及显示模块
				var index = sessionStorage.getItem('currentNav');
				if(index) {
					var li = $('#slider .mui-tab-item').eq(index);
		           	li.addClass('mui-active').siblings().removeClass('mui-active');
		           	$('.mui-control-content').removeClass('mui-active');
		           	if(index == 0) {
		           		$('#tabbar').addClass('mui-active');
		           	} else if(index == 1) {
		           		$('#tabbar-with-chat').addClass('mui-active');
		           	} else {
		           		$('#tabbar-with-contact').addClass('mui-active');
		           	}
				}
			}
			getIntroduce();//获取banner数据
			getVisaHomePageList();//获取首页数据
			getOrderList();//获取订单列表
//			floorNavTop = $(".floor-nav").offset().top*1-45;搜索框高度45
			floorNavTop = $(".floor-nav").offset().top*1;
			var swiper = new Swiper('.banner', {
		      	spaceBetween: 30,
		      	effect: 'fade',
		      	observer:true,//修改swiper自己或子元素时，自动初始化swiper
    				observeParents:true,//修改swiper的父元素时，自动初始化swiper
		      	pagination: {
		        		el: '.banner .swiper-pagination',
		        		clickable: true,
		  		}
		   });
//			scrollFloor({
//				floorClass : '.scroll-floor',       //楼层盒子class;默认为'.scroll-floor'
//				navClass : '.scroll-nav',           //导航盒子class;默认为'.scroll-nav'
//				activeClass : 'active',             //导航高亮class;默认为'active'
//				delayTime:300,                      //点击导航，滚动条滑动到该位置的时间间隔;默认为200
//				activeTop:200,                      //楼层到窗口的某个位置时，导航高亮（设置该位置）;默认为100
//				scrollTop:0                         //点击导航，楼层滑动到窗口的某位置;默认为100
//			});
		})
//		window.onload=function(){
//			setTimeout(function() {
//				var swiper = new Swiper('.country', {
//			      	slidesPerView: 1.3,
//			      	spaceBetween: 10,
//			      	freeMode: true,
//			      	observer:true,//修改swiper自己或子元素时，自动初始化swiper
//	    				observeParents:true,//修改swiper的父元素时，自动初始化swiper
//			      	pagination: {
//			        		el: '.country .swiper-pagination',
//			        		clickable: true,
//			      	}
//				});
//			}, 1000) 
//     	}
		$('#slider').on('tap', '.mui-tab-item', function() {
			var id = $(this).data('id');
			sessionStorage.setItem("currentNav",id);
		})
	    //自定义事件，模拟点击“首页选项卡”
		document.addEventListener('#slider', function() {
			var defaultTab = document.getElementById("mineTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
		});
		//监听滚动，滑动到顶部时设置div为fixed
		$(document).scroll(function(e) {
//			console.log($(".floor-nav").offset().top, $(document).scrollTop(), floorNavTop);
		    if(floorNavTop >= $(document).scrollTop()){
		    		$(".floor-nav").css("top", "0px");
		        $(".floor-nav").css("position", "relative");
		    } else{
		    		$(".floor-nav").css("top", "0px");
		        $(".floor-nav").css("position", "fixed");
		    }
		});
		$('.more').click(function(){
			$(this).hide();
			$('.floor3').eq(1).css('height',2000);
		});
		//获取banner信息图片
		function getIntroduce() {
			base.postData(base.url.getIntroduce, {}, getIntroduceSuccess);
		}
		function getIntroduceSuccess(data) {
			if (data.success) {
				var list = data.extendData.introduceList;
				var html = "";
				for(var index in list) {
					html+='<div class="swiper-slide" style="height: 226px; background-image:url('+list[index].introduceImg+')"></div>';
				}
				$(".banner").find(".swiper-wrapper").html(html);
			}
		}
		//签证首页信息
		function getVisaHomePageList() {
			base.setWait("正在获取数据...");
			base.postData(base.url.getVisaHomePageList, {customerId: customerId}, getVisaHomePageListSuccess);
		}
		function getVisaHomePageListSuccess(data) {
			if (data.success) {
				var goodsList = data.extendData.goodsList;
				var visaHomePageList = data.extendData.visaHomePageList;
				var goodsHtml = "";
				for(var index in goodsList) {
					goodsHtml+= getHotGoodsHtml(goodsList[index]);;
				}
				$("#hotGoods").html(goodsHtml);
				!goodsList.length&&$(".hot-goods-tips-div").show();
				var countryGoodsHtml = "";
				var continentsGoodsHtml = "";
				for(var index in visaHomePageList) {
					countryGoodsHtml+= getVisaTypeHtml(visaHomePageList[index]);
					if(visaHomePageList[index].countryList.length > 0) {
						continentsGoodsHtml+= getContinentsHtml(visaHomePageList[index]);
					}
				}
//				var _screenWidth = $(document.body).width();
//				var _currentWidth = visaHomePageList.length*50;
//				$(".floor-nav").css("width", (_currentWidth >= _screenWidth ? _currentWidth : _screenWidth)+"px")
				$(".floor-nav").find(".scroll-nav").after(countryGoodsHtml);
				$(".hot-country-container").after(continentsGoodsHtml);
				var swiper = new Swiper('.country', {
			      	slidesPerView: 1.3,
			      	spaceBetween: 10,
			      	freeMode: true,
			      	observer:true,//修改swiper自己或子元素时，自动初始化swiper
	    				observeParents:true,//修改swiper的父元素时，自动初始化swiper
			      	pagination: {
			        		el: '.country .swiper-pagination',
			        		clickable: true,
			      	}
				});
				scrollFloor({ //放在此处滑动索引才生效
					floorClass : '.scroll-floor',       //楼层盒子class;默认为'.scroll-floor'
					navClass : '.scroll-nav',           //导航盒子class;默认为'.scroll-nav'
					activeClass : 'active',             //导航高亮class;默认为'active'
					delayTime:300,                      //点击导航，滚动条滑动到该位置的时间间隔;默认为200
					activeTop:50,                      //楼层到窗口的某个位置时，导航高亮（设置该位置）;默认为100
					scrollTop:0                         //点击导航，楼层滑动到窗口的某位置;默认为100
				});
			}
		}
		function getHotGoodsHtml(item) {
			var html = '';
			html+='<div class="li-goods">'
			html+=	'<div class="item-goods">'
			html+=		'<div class="goods-id">'+item.goodsId+'</div>'
			html+=		'<div class="cuntry-id">'+item.cuntryId+'</div>'
			html+=		'<img class="goods-img" src="'+item.countryImg+'" />'
			html+=		'<div class="goods-name">'+item.goodsName+'</div>'
			html+=		'<div class="goods-price">¥'+item.presentPrice+'</div>'
			html+=	'</div>'
			html+='</div>'
			return html;
		}
		function getVisaTypeHtml(item) {
			var	html= '';
			html+='<div class="scroll-nav">'+item.areaName+'</div>'
			return html;
		}
		function getContinentsHtml(item) {
			var	html= '';
			html+='<div class="scroll-floor country-container">'
			html+='		<div class="chau-title-container">'
			html+='			<div class="chau-title-div">'
			html+='				<span>'+item.areaName+'</span>'
			html+='				<img class="icon" src="../img/index/go.png" />'
			html+='			</div>'
			html+='			<div class="chau-tips">已支持'+item.countryList.length+'个国家和地区</div>'
			html+='		</div>'
			html+='		<div class="swiper-container country">'
			html+='	    		<div class="swiper-wrapper">'
			for (var i in item.countryList) {
				html+='	      		<div class="swiper-slide" style="background-image:url('+item.countryList[i].countryImg+')">'
				html+='	      			<div class="swiper-country-div">'
				html+='	      				<div class="country-id-li">'+item.countryList[i].cuntryId+'</div>'
				html+='	      				<div class="country-name-li">'+item.countryList[i].countryName+'</div>'
				html+='						<div class="visa-type-div">'
				for(var j in item.countryList[i].visaTypeList) {
					html+='						<span>'+item.countryList[i].visaTypeList[j].visaTypeName+'</span>'
				}
				html+='						</div>'
				html+='					</div>'
				html+='	      		</div>'
			}
			html+='	    		</div>'
			html+='		</div>'
			html+='</div>'
			return html;
		}
		function getOrderList(){
			base.postData(base.url.getOrderList, {customerId: customerId}, getOrderListSuccess);
		}
		function getOrderListSuccess(data){
			if (data.success) {
				//初始化微信 用于支付
				base.initWX(function () {});
				var list = data.extendData.orderInfoList;
				var html = "";
				for (var i=0; i<list.length; i++) {
					if(base.isOnWx() && list[i].payOrderType==1) {
						html += pingOrder(list[i]);
					} else {
						html += pingOrder(list[i]);
					}
				}
				$("#orderList").html(html);
			}
		}
		function pingOrder(obj){
			var html = '<div class="order-list">'
				html+=		'	<input type="hidden" name="orderNo" value="'+obj.orderNo+'" />'
				html+=		'	<input type="hidden" name="addressId" value="'+obj.addressId+'" />'
				html+=		'	<input type="hidden" name="applyCustomerId" value="'+obj.applyCustomerId+'" />'
				html+=		'	<div class="order-status space-between">'
				html+=		'		<span class="order-no">订单编号：'+obj.orderId+'</span><span class="status">'+(obj.isPay==1?'已支付':'待上传资料')+'</span>'
				html+=		'	</div>'
				html+=		'	<div class="order-info">'
				html+=		'		<div class="order-title">'
				html+=		'			<img class="order-img" src="'+obj.countryImg+'" />'
				html+=		'			<div class="order-name mui-ellipsis">'+obj.goodsName+'</div>'
				html+=		'		</div>'
				html+=		'		<div class="order-user">'
				html+=		'			<span class="user-name">'+obj.applyCustomerName+'</span><span class="user-post">'+obj.dataTypeName+'</span>'
				html+=		'		</div>'
				html+=		'	</div>'
				html+=		'	<div class="order-btn">'
				html+=		'		<button type="button" style="color: #ccc;" class="mui-btn mui-btn-outlined delete-order">取消订单</button>'
				html+=		'		<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined upload-data">上传资料</button>'
						if(obj.isPay == 2) {
				html+=			'		<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined order-pay">立即支付</button>'
						}
				html+=			'</div>'
				html+=	'</div>';
			return html;
		}
		$("#orderList").on('tap', '.delete-order', function(e){
			e.stopPropagation();
			var orderNo = $(this).closest(".order-list").find("input[name='orderNo']").val();
			base.postData(base.url.deleteOrder, {orderNo: orderNo}, deleteOrderSuccess);
		});
		function deleteOrderSuccess(data){
			mui.toast(data.message);
			if (data.success) {
				getOrderList();
			}
		}
	    $("#hotGoods").on("click",".li-goods",function(){
	    		var _goodsId = $(this).find(".goods-id").text();
	    		var _cuntryId = $(this).find(".cuntry-id").text();
	    		parent.location.href = "visaDetail.html?goodsId="+_goodsId+"&cuntryId="+_cuntryId+'&customerId='+customerId;
	    	})
	    $('.goods-container').on('tap', '.swiper-slide', function() {
	    		var cuntryId = $(this).find(".country-id-li").text();
			parent.location.href = "packageChooseDetail.html?cuntryId="+cuntryId+'&customerId='+customerId;
		})
		$('#tabbar').on('tap', '.search-div', function() {
			parent.location.href = "search.html?customerId="+customerId;
		})
		$('.visa-container').on('tap', '.left-visa-div', function() {
			parent.location.href = "manyTimesVisa.html?customerId="+customerId;
		})
		$('.visa-container').on('tap', '.right-visa-div', function() {
			parent.location.href = "visaFree.html?customerId="+customerId;
		})
		$('.menu-div').on('tap', '.item-div', function() {
			var typeID = $(this).data('type');
			switch (typeID){
				case 1:
					//切换到指定的选项卡
//                  mui.trigger(document.getElementById("orderTab"), 'touchstart');
//                  mui.trigger(document.getElementById("orderTab"), 'tap');
                    parent.location.href = "myOrder.html?customerId="+customerId;
					break;
				case 2:
					parent.location.href = "applicantInfo.html?customerId="+customerId;
					break;
				case 3:
					parent.location.href = "addressManagement.html?customerId="+customerId;
					break;
				case 4:
					parent.location.href = "feekback.html?customerId="+customerId;
					break;
				case 5:
					window.location.href = 'tel://13129330825';
					break;
				case 6:
					break;
				default:
					break;
			}
		});
		$(".order").on('tap', '.order-list', function(){
			var _orderNo = $(this).find("input[name='orderNo']").val();
			parent.location.href = "orderInfo.html?customerId="+customerId+"&orderNo="+_orderNo;
		});
		$(".order").on('tap', '.upload-data', function(e){
			e.stopPropagation();
			var _orderNo = $(this).closest(".order-list").find("input[name='orderNo']").val();
			var _applyCustomerId = $(this).closest(".order-list").find("input[name='applyCustomerId']").val();
			parent.location.href = "dataUpload.html?customerId="+customerId+"&orderNo="+_orderNo+"&applyCustomerId="+_applyCustomerId;
		});
		$('.order').on('tap', '.order-pay', function(e) {
			e.stopPropagation();
			var _orderNo = $(this).closest(".order-list").find("input[name='orderNo']").val();
			var _addressId = $(this).closest(".order-list").find("input[name='addressId']").val();
			var isWechat = base.isOnWx();
			var params = {
               orderNo: _orderNo,
               customerId: customerId,
               addressId: _addressId
           	}
			if (isWechat) {
				base.weChatPay(params, function(rse) {
					//支付成功
					mui.toast('支付成功');
					setTimeout(function() {
						window.location.href='index.html?customerId='+customerId+'&fromType=1';
					}, 1000)
				}, function() {
					//取消支付
				}, function() {
					//支付失败
					mui.toast('支付失败，请稍后再试！')
				});
			} else {
				base.postData(base.url.perpayH5,params,function(data) {
					var cfg = data.extendData;
					if (data.success) {
						if(data.extendData.mweb_url) {
							var urlPath = root_host+'ry_visa_web/pages/index.html?customerId='+customerId+'&fromType=1';
							window.location.href = data.extendData.mweb_url+'&redirect_url='+encodeURIComponent(urlPath);
						}
					} else {
						mui.toast(data.message);
					}
				});
			}
		})
		function handleInputChange(file) {
			var base64, file = file.files[0];
			var maxSize = 1024 * 1024 * 8; //最大不超过8M
			var imgSize = file.size;
			if(maxSize < imgSize) {
				alert('上传图片不能超过8M');
				file.value = '';
				return
			}
			var reader = new FileReader();
			reader.onload = function(e) {
				base64 = e.target.result;
				canvasDataURL(base64);
			}
			reader.readAsDataURL(file);
		}
		//利用canvas压缩图片，根据画布大小和图像质量压缩
		function canvasDataURL(base64) {
			var img = new Image();
			img.src = base64;
			img.onload = function() {
				//默认按照比例压缩
				var scale = this.width / this.height;
				//规定压缩后的大小
				var canvasWidth = 300;
				var canvasHeight = canvasWidth / scale;
				//生成canvas
				var canvas = document.createElement('canvas');
				var ctx = canvas.getContext('2d');
				//创建节点属性
				canvas.width = canvasWidth;
				canvas.height = canvasHeight;
				var anw = document.createAttribute('width');
				anw.nodeValue = canvasWidth;
				var anh = document.createAttribute('height');
				anh.nodeValue = canvasHeight;
				canvas.setAttributeNode(anw);
				canvas.setAttributeNode(anh);
				ctx.drawImage(this, 0, 0, canvasWidth, canvasHeight);
				//图像质量,值越小，所绘制出的图像越模糊
				var quality = 0.92;
				var base64String = canvas.toDataURL('img/jpeg', quality);
				//通过base64获取二进制文件
				var blob = getBlobByBase64(base64String);
				//上传图片
				uploadImg(blob);
			}
		}
		//通过base64获取二进制文件
		function getBlobByBase64(base64String) {
			var arr = base64String.split(','),
				mine = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while(n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new Blob([u8arr], {
				type: mine
			});
		}	
		//上传图片
		function uploadImg(blob){
			base.setWait("正在上传，请稍等...");
			var url = base.url.updateCuetomerInfo; //需要上传的接口地址
			var fd = new FormData();
			//上传文件参数(看接口需要传什么)
			console.log(blob);
			fd.append('file', blob, 'authonValidate.jpeg');
			fd.append('customerId', customerId);
			//XMLHttpRequest
			var xhr = new XMLHttpRequest();
			xhr.open('post', url);
			//请求头参数（看接口需要传什么）
			//		    xhr.setRequestHeader('token',sessionStorage.getItem('token'));
			//		    xhr.setRequestHeader('comId',sessionStorage.getItem('comId'));
			xhr.onreadystatechange = function() {
				console.log(xhr);
				if(xhr.readyState != 4) {
					return;
				}
				var data = JSON.parse(xhr.responseText);
				base.clearWait();
				if(data.success) {
					sessionStorage.setItem('headImg', data.extendData.headImg);
					$(".header-div").css("background-image", "url("+data.extendData.headImg+")");
					$(".header-div").css("background-size", "100% 100%");	
				} else {
					mui.toast(data.message);
				}
			}
			xhr.send(fd);
		}
	</script>
</html>